{% extends 'index.html' %}

{% block head %}
<style type="text/css">
    .display_none{display: none;}
</style>

{% endblock %}

{% block bodyweigh %}
<body style="width: 2000px; background-size: 2000px 200%;">
{% endblock %}

{% block content %}

    <!-- 右侧主体开始 -->
        <div class="page-content" >
          <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <form class="layui-form xbs" action="" >
                <div class="layui-form-pane" style="text-align: center;">
                  <div class="layui-form-item" style="display: inline-block;">
                    <label class="layui-form-label xbs768">日期范围</label>
                    <div class="layui-input-inline xbs768">
                      <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
                    </div>
                    <div class="layui-input-inline xbs768">
                      <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
                    </div>
                    <div class="layui-input-inline">
                      <input type="text" name="username" id="name" placeholder="请输入新闻标题名" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-input-inline" style="width:80px">
                        <div class="layui-btn" id="search"><i class="layui-icon">&#xe615;</i></div>
                    </div>
                  </div>
                </div> 
            </form>
            <xblock><button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button><span class="x-right" style="line-height:40px" id="counts"></span></xblock>
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" name="" value="">
                        </th>
                        <th>
                            ID
                        </th>
                        <th>
                            新闻标题
                        </th>
                        <th>
                            新闻图片
                        </th>
                        <th>
                            创建时间
                        </th>
                        <th>
                            游戏类型
                        </th>
                        <th>
                            赛事类型
                        </th>
                        <th>
                            新闻状态
                        </th>
                        <th>
                            是否热门
                        </th>
                        <th>
                            最近修改时间
                        </th> 
                        <th>
                            查看新闻内容
                        </th>                  
                        <th>
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody id="news">
                   
                </tbody>
            </table>
            <!-- 右侧内容框架，更改从这里结束 -->
          </div>
        </div>
        <!-- 右侧主体结束 -->
{% endblock %}

{% block script %}
 <!-- 页面动态效果 -->
    <script>

        layui.use(['laydate'], function(){
          laydate = layui.laydate;//日期插件

          //以上模块根据需要引入
          //
          

          
          var start = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
              end.min = datas; //开始日选好后，重置结束日的最小日期
              end.start = datas //将结束日的初始值设定为开始日
            }
          };
          
          var end = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
              start.max = datas; //结束日选好后，重置开始日的最大日期
            }
          };
          
          document.getElementById('LAY_demorange_s').onclick = function(){
            start.elem = this;
            laydate(start);
          }
          document.getElementById('LAY_demorange_e').onclick = function(){
            end.elem = this
            laydate(end);
          }
          
        });

        //批量删除提交
         function delAll () {
            layer.confirm('确认要删除吗？',function(index){
                //捉到所有被选中的，发异步进行删除
                layer.msg('删除成功', {icon: 1});
            });
         }
         /*用户-添加*/
        function member_add(title,url,w,h){
            x_admin_show(title,url,w,h);
        }
        /*用户-查看*/
        function member_show(title,url,id,w,h){
            x_admin_show(title,url,w,h);
        }



        // 用户-编辑
        function member_edit (title,url,id,w,h) {
            x_admin_show(title,url,w,h); 
        }

        /*用户-删除*/
        function member_del(obj,id){
            layer.confirm('确认要删除吗？',function(index){
                //发异步删除数据
                $(obj).parents("tr").remove();
                layer.msg('已删除!',{icon:1,time:1000});
            });
        }
        </script>

        
        <script>

            $("#counts").html("共有数据：{{ data|count }} 条")

            {% for i in data %}

            $("#news").append(

                    '<tr>'+
                        '<td>'+
                            '<input type="checkbox" value="{{loop.index}}" name="">'+
                        '</td>'+
                        '<td>'+
                            '{{loop.index}}'+
                        '</td>'+
                        '<td>'+
                            '{{ i.title }}'+
                        '</td>'+
                        '<td>'+
                            '<img style="width:50px;height:50px" src="{{ i.icon }}" >'+
                        '</td>'+
                        '<td>'+
                            '{{ i.create_time }}'+
                        '</td>'+
                        '<td>'+
                            '{{ i.game_name }}'+
                        '</td>'+
                        '<td>'+
                            '{{ i.event_name }}'+
                        '</td>'+
                        '<td>'+
                            '<select style="color: #000;" id="select{{loop.index}}"> <option value ="1" style="color: #000;" {% if i.status==1 %}selected = "selected"{% else %}{% endif %} >未发布</option><option style="color: #000;" value ="2" {% if i.status==2 %}selected = "selected" {% else %}{% endif %} >发布中</option><option style="color: #000;" value ="3" {% if i.status==3 %}selected = "selected" {% else %}{% endif %} >已发布</option></select><input type="hidden" class="status" value="{{ i.status }}"/>'+
                        '</td>'+
                        '<td>'+                      
                            '<select style="color: #000;" id="hot_select{{loop.index}}"> <option style="color: #000;" value ="0" {% if i.hot_status==0 %}selected = "selected"{% else %}{% endif %} >非热门新闻</option><option style="color: #000;" value ="1" {% if i.hot_status==1 %}selected = "selected" {% else %}{% endif %} >热门新闻</option></select><input type="hidden" class="hot_status" value="{{ i.hot_status }}"/>'+
                        '</td>'+      
                        '<td>'+
                            '{{ i.update_time }}'+
                        '</td>'+   
                        '<td>'+
                            '<button type="button" style="color: #000;" class="read">查看新闻内容</button>'+
                        '</td>'+                
                        '<td class="td-manage">'+
                            '<button type="button" style="color: #000;" class="modify">保存</button>  &emsp;'+
                            '<button type="button" style="color: #000;" class="delete">删除</button>'+
                        '</td>'+
                        '<input type="hidden" class="id" value="{{ i.id }}"  />'+
                    '</tr>')


                    $("#select{{loop.index}}").on("click",function(){
                        var star_flag = $("#select{{loop.index}} option:selected").val();
                        $(this).next().val(star_flag);
                    });

                    $("#hot_select{{loop.index}}").on("click",function(){
                        var hot_status = $("#hot_select{{loop.index}} option:selected").val();
                        $(this).next().val(hot_status);
                    });
                {% endfor %}

        </script>

        <script>
            
            $(".read").on("click",function() {
                var id = $(this).parent().parent().find(".id").val();
                console.log(id);
                location.href="/app/show/modify_news?id="+id;
            });
            
            $(".modify").on("click",function() {
            
                var id = $(this).parent().parent().find(".id").val();
                var status = $(this).parent().parent().parent().find(".status").val();
                var hot_status = $(this).parent().parent().find(".hot_status").val();
            
                params = {
                    "id":id,
                    "status":status,
                    "hot_status":hot_status,
                };
                
                $.ajax({
                    url:"/app/news/type_modify",
                    type:"POST",
                    data:JSON.stringify(params),
                    contentType:'application/json',
                    success:function(res){
                        if(res.status == 0){
                            alert(res.msg);
                            location.href="/app/show/news_list";
                        }else {
                            alert(res.msg);
                        }
                    }
                });
                
            });

            $(".delete").on("click",function(){
                var id = $(this).parent().parent().find(".id").val();
                params = {"id":id};
                $.ajax({
                    url:"/app/news/delete",
                    type:"POST",
                    data:JSON.stringify(params),
                    contentType:'application/json',
                    success:function(res){
                        if(res.status == 0){
                            alert(res.msg);
                            location.href="/app/show/news_list";
                        }else {
                            alert(res.msg);
                        }
                    }
                })
            });

            $("#search").on("click",function(){

                var name = $("#name").val();

                if ( name == "" ) {
                    location.href="/app/show/news_list";
                }else{

                    location.href="/app/show/news_list?name="+name;
                }
            });


        </script>
{% endblock %}